/* eslint-disable vue/no-setup-props-destructure */
<template>
  <div class="content-box">
    <div class="headline flex flex-jus">
      <p>{{ title }}</p>
      <el-radio-group
        @change="change"
        :model-value="modelValue"
        v-if="modelValue"
      >
        <el-radio label="1" border>文章</el-radio>
        <el-radio label="2" border>视频</el-radio>
      </el-radio-group>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'card',
  props: {
    modelValue: {
      type: String
    },
    title: {
      type: String
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const change = (value: string) => {
      emit('update:modelValue', value)
    }
    return {
      change
    }
  }
})
</script>

<style lang="less" scoped>
.content-box {
  margin-top: 40px;
  .headline {
    padding-left: 10px;
    height: 40px;
    font-size: 33px;
    border-left: 8px solid #247cf2;
    color: #247cf2;
  }
}
</style>
